<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document Scanner</title>
    <script type="text/javascript" src="http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js"></script>
    <style>
        h1 {
            font-size: 2em;
            font-weight: bold;
            color: #777777;
            text-align: center
        }
        
        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <h1>
        Document Scanner
    </h1>
    We are using node
    <script>
        document.write(process.versions.node)
    </script>, Chrome
    <script>
        document.write(process.versions.chrome)
    </script>, and Electron
    <script>
        document.write(process.versions.electron)
    </script>.
    <table>
        <tr>
            <td>
                <!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
                   If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
                <div id="dwtcontrolContainer"></div>
            </td>
        </tr>

        <tr>
            <td>
                <input type="button" value="Scan" onclick="scanImage();" />
                <input type="button" value="Load" onclick="loadImage();" />
                <input type="button" value="Save" onclick="saveImage();" />
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var console = window['console'] ? window['console'] : {
            'log': function() {}
        };
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used

        var DWObject;

        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
            if (DWObject) {
                DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
            }
        }

        function scanImage() {
            if (DWObject) {
                var bSelected = DWObject.SelectSource();

                if (bSelected) {
                    var OnAcquireImageSuccess, OnAcquireImageFailure;
                    OnAcquireImageSuccess = OnAcquireImageFailure = function() {
                        DWObject.CloseSource();
                    };

                    DWObject.OpenSource();
                    DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan. 
                    DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
                }
            }
        }

        //Callback functions for async APIs
        function OnSuccess() {
            console.log('successful');
        }

        function OnFailure(errorCode, errorString) {
            alert(errorString);
        }

        function loadImage() {
            if (DWObject) {
                DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
                DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
            }
        }

        function saveImage() {
            if (DWObject) {
                if (DWObject.HowManyImagesInBuffer > 0) {
                    DWObject.IfShowFileDialog = true;
                    if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1) {
                        DWObject.ConvertToGrayScale(DWObject.CurrentImageIndexInBuffer);
                    }
                    DWObject.SaveAsJPEG("DynamicWebTWAIN.jpg", DWObject.CurrentImageIndexInBuffer);
                }
            }
        }
    </script>
</body>

</html>